<template>
  <div class="form-wrapper">
    <template v-for="item in dataList" :key="item.content">
      <div class="row-item-wrapper">
        <div class="label-wrapper">
          {{ item.content }}
        </div>
        <div class="content-wrapper">
          {{ item.value }}
          <el-radio-group
            v-model="item.value"
            @change="handleChange($event, item)"
          >
            <el-radio value="1" size="large" label="夏令时" />
            <el-radio value="2" size="large" label="非夏令时" />
          </el-radio-group>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { ElRadioGroup, ElRadio } from 'element-plus';
export default {
  name: 'formName',
  emits: ['change'],
  components: { ElRadioGroup, ElRadio },
  props: {
    fromList: {
      type: Array,
      default: function () {
        return [{ content: '开始时间', value: '1' }];
      },
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.dataList = this.fromList;
  },
  methods: {
    handleChange(value, item) {
      console.log('handleChange', value, item);
      this.$emit('change', this.dataList);
    },
  },
  watch: {
    fromList: {
      handler() {
        console.log('xx', this.fromList);
      },
    },
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
};
</script>

<style lang="less" scoped>
.row-item-wrapper {
  display: flex;
  height: 40px;
  align-items: center;
  .label-wrapper {
    width: 100px;
  }
  .content-wrapper {
  }
}
</style>
